<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Instant.js (with IE 6/7 support)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-language" content="en">
	<link rel="bookmark" type="text/html" title="Instant.js" href="http://www.netzgesta.de/instant/">
	<meta name="Author" lang="en" content="instant.netzgesta.de - Christian Effenberger">	<meta name="Publisher" lang="en" content="www.netzgesta.de">	<meta name="Copyright" lang="en" content="www.netzgesta.de - Christian Effenberger">	<meta name="Generator" lang="en" content="Christian Effenberger">
	<meta name="Description" lang="en" content="Instant.js 2.2 allows you to add an instant picture effect (including tilt) to images on your webpages through unobtrusive javascript">
	<meta name="Keywords" lang="en" content="instant.js,images,tilt,shading,shadow,polaroid effect,instant image,unobtrusive javascript,Mozilla,Firefox,Opera,Safari">
	<meta http-equiv="imagetoolbar" content="no">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<script type="text/javascript" src="cvi_text_lib.js"></script>
	<script type="text/javascript" src="instant.js"></script>
	<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
a { color: blue; font-style:italic; text-decoration:none; }
tt {color: green;}
b {color: #993333;}
body { background: url(images/backgrnd.jpg) silver; color: black; font-family: Georgia,serif; line-height: 1.5; margin: 2em 2em;}
h2 { line-height: 1; }
.demo { float: left; padding: 10px; }
.logo { position: relative; width: 400px; height: 120px; white-space: nowrap;}
#guru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }
#guru div { border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }
#header { margin-bottom: 0; font-weight: normal; font-style: italic; color: gray; }
.bookmarks { white-space: nowrap; width: 98%; margin: 0; padding-top: 10px; border-top: 1px dotted gray;}
</style>
</head>
<body><noscript><div id="guru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - With deactivated JavaScript: Images stay unmodified!</div></div></noscript>
<table>
<tr><td valign="top" style="padding-top: 0.5em">
<div class="logo">
<img class="instant itiltright preserve" style="position:absolute; left:0px; z-index:4;" src="images/in.jpg" width="90" height="120" border="0" alt="IN">
<img class="instant itiltleft preserve" style="position:absolute; left:80px; z-index:2;" src="images/st.jpg" width="100" height="120" border="0" alt="ST">
<img class="instant itiltright preserve" style="position:absolute; left:160px; z-index:3;"src="images/an.jpg" width="100" height="120" border="0" alt="AN">
<img class="instant itiltleft preserve" style="position:absolute; left:250px; z-index:1;"src="images/t.jpg" width="80" height="120" border="0" alt="T.">
<img class="instant itiltright preserve" style="position:absolute; left:320px;"src="images/js.jpg" width="80" height="120" border="0" alt="js">
</div>
</td>
<td style="padding: 0 0 0 15px; margin: 0; line-height: 1.5; font-style: italic;">
<p><strong>Instant.js 2.2</strong> allows you to add an instant picture effect (including tilt) to images on your webpages (alternatively: <a href="http://slided.netzgesta.de/" title="image slides">slided.js</a> or <a href="http://filmed.netzgesta.de/" title="image strips">filmed.js</a>). It uses unobtrusive javascript to keep your code clean.</p>
<p>It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.</p>
<p><small><a href="http://lab.netzgesta.de/" title="showcase">CVI-lab</a>: Get a fast impression of the effects and their illustration qualities.</small></p>
</td></tr>
</table>

<h2>Setting Up</h2>

<p>Download "instant.js" and include it into your webpage.</p>

<code>// only if you want to use the annotation feature...
<br />&lt;script type="text/javascript" src="<tt>cvi_text_lib.js</tt>"&gt;&lt;/script&gt;
<br />// ...else this one only...
<br />&lt;script type="text/javascript" src="<tt>instant.js</tt>"&gt;&lt;/script&gt;
</code>

<h2>Using It</h2>

<p>To get the instant picture effect just add a class="<tt>instant</tt>" to the image <em>(minimum dimension: 64x64)</em>.</p>

<h2>Classes</h2>

<ul>
<li>Initialisation class "<tt>instant</tt>"</li>
<li><small><em>vary the shadow by adding ishadow followed by the desired <b>opacity</b> in percent:</em></small><br>
Shadow opacity class "<tt>ishadow</tt>" - min=0 max=100 default=33</li>
<li><small><em>vary the frame by adding icolor followed by the desired <b>color</b> as hex:</em></small><br>
Frame color class "<tt>icolor</tt>" - min=000000 max=ffffff default=f0f4ff</li>
<li><small><em>vary the tilt direction by adding one of the following:</em></small><br>
Tilt direction class "<tt>itiltleft</tt>" or "<tt>itiltnone</tt>" or "<tt>itiltright</tt>"<br>
by default "instant.js" cycles through [left|none|right].</li>
<li><small><em>prevent the shading by adding noshading:</em></small><br>
Shading off class "<tt>noshading</tt>"</li>
<li><small><em>vary the border design by adding historical:</em></small><br>
Frayed border class "<tt>historical</tt>"</li>
<li><small><em>prevent quadratic corner by adding nocorner:</em></small><br>
Round corner class "<tt>nocorner</tt>"</li>
<li><small><em>preserve the image aspect ratio by adding preserve:</em></small><br>
Image aspectratio class "<tt>preserve</tt>"</li>
<li><small><em>vary the annotation text by adding itxtcol followed by the desired <b>color</b> as hex:</em></small><br>
Text color class "<tt>itxtcol</tt>" - min=000000 max=ffffff default=000000</li>
<li><small><em>get the text from <b>alt</b> attribute by adding itxtalt:</em></small><br>
Text selection class "<tt>itxtalt</tt>"</li>
<li><small><em>get the text from <b>title</b> attribute by adding itxttitle:</em></small><br>
Text selection class "<tt>itxttitle</tt>"</li>
</ul>

<h2>Scripting</h2>

<p>If you want flexibility, use "<b>cvi_instant_lib.js</b>" instead of "<b>instant.js</b>". 
You can make your images respond to user actions (e.g. changing one or more options when the image is hovered over).</p>
<dl>
	<dt><strong>Set</strong> defaults using Javascript</dt>
	<dd>
		<code>
		cvi_instant.defaultTilt = 'none'; <tt>//STR  'n|l|r'-'none|left|right'</tt><br>
		cvi_instant.defaultShade = 33; <tt>//INT  0-100 (% opacity)</tt><br>
		cvi_instant.defaultShadow = 33; <tt>//INT  0-100 (% opacity)</tt><br>
		cvi_instant.defaultColor = '#f0f4ff'; <tt>//STR '#000000'-'#ffffff'</tt><br>
		cvi_instant.defaultNoshade = false; <tt>//BOOLEAN</tt><br>
		cvi_instant.defaultNocorner = false; <tt>//BOOLEAN</tt><br>
		cvi_instant.defaultHistorical = false; <tt>//BOOLEAN</tt><br>
		cvi_instant.defaultPreserve = false; <tt>//BOOLEAN</tt><br>
		cvi_instant.defaultText = ''; <tt>//STR</tt><br>
		cvi_instant.defaultTextcolor = '#000000'; <tt>//STR '#000000'-'#ffffff'</tt><br>
		cvi_instant.defaultFontattr = [100,100,100]; <tt>//OBJ [1-200==weight, 10-400==width, 10-1000==space]</tt>
		</code>
  		<p></p>
	</dd>
	<dt><strong>Add</strong> images using Javascript</dt>
  	<dd>
  		<code>cvi_instant.add(<tt>image</tt>, <tt>options</tt>);</code><br><small>
		<tt>image</tt> should be an image element: document.getElementById(<b>"myimg"</b>)<br>
		<tt>options</tt> can contain one or more values: {<tt>tilt</tt>: <b>value</b>, <tt>shadow</tt>: <b>value</b>, <tt>shade</tt>: <b>value</b>, <tt>color</tt>: <b>value</b>, <tt>noshade</tt>: <b>value</b>, <tt>nocorner</tt>: <b>value</b>, <tt>historical</tt>: <b>value</b>, <tt>preserve</tt>: <b>value</b>, <tt>text</tt>: <b>value</b>, <tt>textcolor</tt>: <b>value</b>, <tt>fontattr</tt>: [<b>value</b>,<b>value</b>,<b>value</b>] }</small>
		<dl><dt>Example:</dt>
		<dd>
			<code>cvi_instant.add(document.getElementById(<b>"myimg"</b>), { <tt>shadow</tt>: <b>75</b>, <tt>shade</tt>: <b>10</b> });</code>  		</dd></dl>
  		<p></p>
  	</dd>
	<dt><strong>Modify</strong> images using Javascript</dt>
  	<dd>
  		<code>cvi_instant.modify(<tt>image</tt>, <tt>options</tt>);</code><br>
  		<small>If the image has already an effect but a <tt>option</tt> value has changed, the effect will be changed accordingly.</small><br>
		<dl><dt>Example:</dt>
		<dd>
			<code>cvi_instant.modify(document.getElementById(<b>"myimg"</b>), { <tt>tilt</tt>: <b>"left"</b> });</code>
  		</dd></dl>
		<p></p>
  	</dd>
	<dt><strong>Remove</strong> effect from an image using Javascript</dt>
	<dd>
		<code>cvi_instant.remove(<tt>image</tt>);</code>
  		<p></p>
	</dd>
</dl>
</div>

<h2>Demonstration</h2>

<p style="clear: left">Shows some of the things "instant.js" does.<small><br><br>First image with class = "<tt>instant itiltleft icolorFFFCE9 ishadow40 historical</tt>", next image with class = "<tt>instant nocorner itxtalt</tt>" and next two images with class = "<tt>instant itxtalt</tt>". All other images with class = "<tt>instant</tt>" only...</small></p>
<div class="demo"><img class="instant ishadow40 itiltleft icolorFFFCE9 historical" src="images/historical.jpg" width="400" height="400" border="0" title="onClick event" onClick="alert('Instant dimension '+this.width+'x'+this.height);" alt=""></div>
<div class="demo"><img class="instant nocorner itxtalt" src="images/girl.jpg" width="160" height="160" border="0" title="onClick event" onClick="alert('ALT=\''+this.alt+'\'');" alt="A beautiful girl">
<br><img class="instant itxtalt itxtcol003399" src="images/girl.jpg" width="120" height="120" border="0" title="onClick event" onClick="alert('ID='+this.id);" id="girl_image" alt="A beautiful girl">
<br><img class="instant itxtalt itxtcol666666" src="images/girl.jpg" width="80" height="80" border="0" title="tooltip support" alt="A beautiful girl">
</div>
<p style="clear: left;"></p>
<img class="instant itiltleft" src="images/example.jpg" width="300" height="202" border="0" alt="">&nbsp;
<img class="instant" src="images/example.jpg" width="300" height="202" border="0" alt="">
<p style="clear: left;"></p>
<img class="instant" src="images/what.jpg" width="240" height="120" border="0" alt="">&nbsp;
<img class="instant preserve" src="images/test.jpg" width="170" height="140" border="0" alt="">&nbsp;
<img class="instant" src="images/what.png" width="180" height="140" border="0" alt="">
<p style="clear: left;"></p>

<h2>Why use Javascript Instant Image?</h2>

<ul>
<li>Fast and easy to implement. Just add class="instant" to the image and your good to go.</li>
<li>Don't need to spend time in an image editor creating an Polaroid<sup>&trade;</sup> image effect.<br>
<small><i>*Polaroid is a trademark of Polaroid Corporation</i></small>.</li>
<li>Works really well with forum avatars. Doesn't require additional server work.</li>
<li>It's dead easy to change the attributes of the images.</li>
<li>Free of charge use on non-commercial and private web sites.</li>
</ul>

<p>In older browsers, the script degrades and your visitors won't notice a thing.</p>

<h2>History</h2>

Version 2.2<ul><li>Added frayed border support</li></ul>
Version 2.1<ul><li>Added round corner support</li></ul>
Version 2.0<ul><li>Added text annotation support</li></ul>
Version 1.7<ul><li>Changed algorithm for calculating border width</li></ul>
Version 1.6<ul><li>Added better shading support for Internet Explorer</li></ul>
Version 1.5<ul><li>Added support to preserve image aspect ratio</li></ul>
Version 1.4<ul><li>Added scriptable lib version <b>cvi_instant_lib.js</b></li></ul>
Version 1.3<ul><li>Added soft shadow support for IE</li><li>Added <tt>noshading</tt> class</li></ul>
Version 1.2<ul><li>Added support for img attributes:<br /><tt>id alt title src onclick</tt></li></ul>
Version 1.12<ul><li>IE bug fixing</li></ul>
Version 1.11<ul><li>Changed minimum dimension to 64x64</li></ul>
Version 1.1<ul><li>Added support for Internet Explorer 6/7</li></ul>
Version 1.0<ul><li>Initial Release</li></ul>

<h2>Credits</h2>

<p>The inspiration for the script came from <a href="http://rmagick.rubyforge.org/Polaroid/polaroid.html">polaroid.rb</a>.</p>

<h2>License</h2>

<p>Instant.js is distributed under this <a href="LICENSE.txt">LICENSE</a>. License permits free of charge use on non-commercial and private web sites only under special conditions <em>(as described in the license)</em>. This license equals neither "<span style="text-decoration: line-through;">open source</span>" nor "<span style="text-decoration: line-through;">public domain</span>". There are also <a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#099;&#118;&#105;&#064;&#110;&#101;&#116;&#122;&#103;&#101;&#115;&#116;&#097;&#046;&#100;&#101;">Commercial Software Licenses</a> available.</p>

<h6>YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
<br>IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.</h6>

<p><strong>Images used are copyrighted and are used for demonstration only.</strong></p>

<p><a href="http://cvi.netzgesta.de/">cvi.netzgesta.de</a>&nbsp;&nbsp;also visit&nbsp;&nbsp;<a href="http://lab.netzgesta.de/">CVI-lab</a>, <a href="http://s5.netzgesta.de/">S5 Reloaded</a> and <a href="http://ajaxfilmdb.sourceforge.net/">AJAX-FilmDB</a></p>

</body>
</html>